<!DOCTYPE html>
<!--
/*
* Copyright 2017 SideeX committers
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License.
*
*/
-->
<html lang="en">

<head>
    <meta charset="utf-8" />
    <!-- TODO: Change the title bar text -->
    <title>Katalon Recorder</title>
    <link href="css/google.css" rel="stylesheet">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/jquery-ui-slider-pips.css">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="js/katalon/codemirror-5.31.0/lib/codemirror.css">
    <link rel="stylesheet" href="css/kar.css" />
    <!-- to hide right button feature -->
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="panel/css/ie.css" type="text/css" media="screen" />
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/lib/utils.js"></script>
    <script type="text/javascript" src="../common/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui-slider-pips.js"></script>
    <script type="text/javascript" src="js/UI/hideshow.js"></script>
    <script type="text/javascript" src="js/lib/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.equalHeight.js"></script>
    <script type="text/javascript" src="js/lib/jquery.tabletab.js"></script>
    <script type="text/javascript" src="js/lib/colResizable-1.6.min.js"></script>
    <script type="text/javascript" src="js/UI/panelSetting.js"></script>
    <script type="text/javascript" src="js/UI/sortable-ui.js"></script>
    <script type="text/javascript" src="js/background/doc.js"></script>
    <script type="text/javascript" src="../content/utils.js"></script>
    <script type="text/javascript" src="../content/atoms.js"></script>
    <script type="text/javascript" src="../content/selenium-api.js"></script>
    <script type="text/javascript" src="js/katalon/selenium-ide/testCase.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/lib/codemirror.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/clike/clike.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/groovy/groovy.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/php/php.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/python/python.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/ruby/ruby.js"></script>
    <script type="text/javascript" src="js/katalon/codemirror-5.31.0/mode/xml/xml.js"></script>
    <script type="text/javascript" src="js/katalon/bowser.js"></script>
    <script type="text/javascript" src="js/katalon/papaparse.js"></script>
    <script type="text/javascript" src="js/katalon/kar-extra.js"></script>
</head>
<!-- TODO: Make whole panel size flexible -->

<body>
    <header id="header">
        <hgroup>
            <img class="logo_img" src="../icons/logo.png"></img>
            <a href="#"><img id="help" class="toolBar_img" src="../icons/help.png"></img></a>
        </hgroup>
    </header>
    <!-- end of header bar -->
    <!-- right button feature -->
    <div id="suite-grid-menu" class="menu">
        <ul>
            <li id="load-testSuite-show-menu"><a href="#">打开测试套</a></li>
            <li id="add-testSuite-menu"><a href="#">新建测试套</a></li>
        </ul>
    </div>
    <div id="command-grid-menu" class="menu">
        <ul>
            <li id="grid-add"><a href="#">添加命令<span class="hotKey">Ctrl+I</span></a></li>
            <li id="grid-delete"><a href="#">删除命令<span class="hotKey"></span></a></li>
            <li id="grid-deleteAll"><a href="#">删除所有命令</a></li>
            <li id="grid-copy"><a href="#">拷贝命令<span class="hotKey">Ctrl+C</span></a></li>
            <li id="grid-paste"><a href="#">粘贴命令<span class="hotKey">Ctrl+V</span></a></li>
            <li id="grid-breakpoint"><a href="#">设置断点</a><span class="hotKey">Ctrl+B</span></li>
        </ul>
    </div>
    <section id="main" class="column">
        <div id="toolbar-container" class="submit_link">
            <!-- hidden, because it has default style -->
            <input id="load-testSuite-hidden" type="file" multiple accept="text/*" style="display: none"></input>
            <input id="load-older-testSuite" type="file" multiple accept="text/*" style="display: none">
            <input id="load-testSuite-show" type="button" value="OpenSuite" style="display: none"></input>
            <button id="save-testSuite" style="display: none">保存测试套</button>
            <button id="close-testSuite" style="display: none">关闭测试套</button>
            <button id="close-all-testSuites" style="display: none">关闭所有测试套</button>
            <button id="add-testSuite" style="display: none">+测试套</button>
            <button id="add-testCase" style="display: none">+用例</button>
            <button id="delete-testCase" style="display: none">-用例</button>
            <a download="info.html" id="downloadlink" style="display: none">下载</a>
            <a name="" target="_blank" id="logo_kr_icon" class="sub_btn"><img src="../katalon/images/branding/branding_128.png" alt="Katalon Recorder" /></a>
            <a name="" target="_blank" id="logo_kr_full" class="sub_btn">
                <img class="dark" src="../katalon/images/branding/Katalon-Recorder-full-color-large.png" alt="Katalon Recorder" />
                <img class="light" src="../katalon/images/branding/Katalon-Recorder-full-color-large-w.png" alt="Katalon Recorder" />
            </a>
            <button id="new" class="sub_btn"><i class="fa"></i> 新建</button>
            <button id="record" class="sub_btn" style="width: 15%"><i class="fa fa-video-camera" aria-hidden="true"></i> 录制</button>
            <button id="playback" class="sub_btn" style="width: 20%" disabled><i class="fa fa-play" aria-hidden="true"></i> 运行</button>
            <button id="stop" class="sub_btn" style="display: none; width: 20%"><i class="fa fa-stop" aria-hidden="true"></i> 停止</button>
            <button id="playSuite" class="sub_btn" style="width: 21%" disabled><i class="fa fa-cube" aria-hidden="true"></i> 运行测试套</button>
            <button id="playSuites" class="sub_btn" style="width: 21%" disabled><i class="fa fa-cubes" aria-hidden="true"></i> 运行所有测试套</button>
            <button id="pause" class="sub_btn btn_pr" style="width: 15.5%" disabled><i class="fa fa-pause-circle" aria-hidden="true"></i> 暂停</button>
            <button id="resume" class="sub_btn btn_pr" style="display: none; width: 15.5%"><i class="fa fa-reply" aria-hidden="true"></i> 继续</button>
            <!-- <button id="ka-upload" class="sub_btn" style="width: 20%" title="Upload logs to Katalon TestOps to keep track of execution history, access to automation dashboard and reports.">
                <img src="../katalon/images/branding/ka_32x24px.png" alt="Katalon TestOps"/>报告</button>-->
            <button id="export" class="sub_btn" style="width: 15%"><i class="fa"></i> 导出</button>
            <button id="settings" class="sub_btn" style="width: 20%"><i class="fa"></i> 定位优先级</button>
            <div id="speed-wrapper" style="position: relative; flex-grow: 0; flex-shrink: 0;">
                <button id="speed" class="sub_btn"><i class="fa"></i>&nbsp;</button>
                <div id="slider-container" style="display:none"></div>
            </div>
            <!-- <button id="settings" class="sub_btn"><i class="fa"></i></button>-->
            <a id="help" class="sub_btn"><i class="fa"></i></a>
            <a id="github" class="sub_btn" target="_blank" href="https://gitee.com/ui_automation_learning_group/katalon-recorder"><i class="fa fa-github"></i></a>
            <!--a id="adjust" class="sub_btn"><i class="fa fa-adjust" aria-hidden="true"></i></a-->
            <!-- TODO: Add a stop button -->
        </div>
        <!-- load Suite of older version -->
        <!--<div id="loadSuiteOfOlderVersion" title="Alert">
            Please open test case!
            <input id="testSuiteOpener" type="file" multiple accept="text/*">
        </div>-->
        <div id="main-section">
            <article id="tree-section">
                <div id="slider" style="display:none"></div>
                <div id="middle-container" class="module">
                    <header>
                        <h3 class="suite-container-title">
                            <div class="suite-container-title">测试套</div>
                            <div id="suite-fun" class="suite-fun">
                                <div id="suite-open" class="suite-open"><i id="suite-open-icon" class="fa fa-folder-open-o suite-open" aria-hidden="true"></i></div>
                                <div id="suite-plus" class="suite-plus"><i id="suite-plus-icon" class="fa fa-plus suite-plus" aria-hidden="true"></i></div>
                            </div>
                        </h3>
                    </header>
                    <div id="testCase-container" class="case_list">
                        <!-- Sug: Add animation when dragdrop -->
                        <div id="testCase-grid" class="module_content">
                        </div>
                    </div>
                </div>
                <!-- end of messages article -->
                <article id="result-container" class="module">
                    <div class="fieldset">
                        <div class="result-row">
                            <label id="result1">通过</label>
                            <p id="result-runs" class="runs">0</p>
                        </div>
                        <div class="result-row">
                            <label id="result2">失败</label>
                            <p id="result-failures" class="failures">0</p>
                        </div>
                    </div>
                </article>
            </article>
            <article id="steps-section" class="module">
                <div id="command-container" class="tab_content case_hight">
                    <div class="smallSection">
                        <table id="command-grid" class="tablesorter" cellspacing="0">
                            <thead class="fixed">
                                <tr>
                                    <th style="width: 20%">命令<div class="border"></div>
                                    </th>
                                    <th style="width: 30%">目标<div class="border"></div>
                                    </th>
                                    <th style="width: 30%">值</th>
                                    <th style="width: 20%">备注</th>
                                </tr>
                            </thead>
                            <tbody id="records-grid">
                                <input id="records-count" type="hidden" value="0">
                                </input>
                            </tbody>
                        </table>
                        <div class="record-bottom"></div>
                    </div>
                </div>
                <div id="command-toolbar">
                    <div id="command-toolbar-buttons">
                        <button id="grid-add-btn"></button>
                        <button id="grid-delete-btn"></button>
                        <button id="grid-copy-btn"></button>
                        <button id="grid-paste-btn"></button>
                    </div>
                    <div class="fieldset">
                        <!-- TODO: make (command &) target selectable -->
                        <div class="command-row">
                            <label>命令</label>
                            <input id="command-command" list="command-command-list" type="text"><i id="command-" class="fa fa-chevron-down" aria-hidden="true"></i>
                            <div id="command-dropdown" class="w3-dropdown-content w3-bar-block">
                            </div>
                        </div>
                        <datalist id="command-command-list">
                        </datalist>
                        <div class="command-row">
                            <label>目标</label>
                            <input id="command-target" list="command-target-list" type="text"><i id="target-" class="fa fa-chevron-down" aria-hidden="true"></i>
                            <div id="target-dropdown" class="w3-dropdown-content w3-bar-block">
                            </div>
                            <button id="selectElementButton" class="btn_sf" style="width: 60px" tabindex="-1">Select</button>
                            <button id="showElementButton" class="btn_sf" style="width: 50px" tabindex="-1">Find</button>
                        </div>
                        <datalist id="command-target-list">
                        </datalist>
                        <div class="command-row">
                            <label>值</label>
                            <input id="command-value" type="text">
                        </div>
                        <div class="command-row">
                            <label>备注</label>
                            <input id="command-desc" type="text">
                        </div>
                    </div>
                </div>
                <!-- end of #command-container -->
            </article>
            <!-- end of content manager article -->
            <div class="clear"></div>
        </div>
        <div id="log-section">
            <article class="module">
                <header class="tabs_involved">
                    <ul class="tabs2">
                        <li id="history-log"><a>日志</a></li>
                        <li id="screenshot"><a>截图</a></li>
                        <li id="variable-log"><a>变量</a></li>
                        <li id="data-files"><a>数据驱动</a></li>
                        <li id="extensions"><a>扩展脚本</a></li>
                        <li id="reference-log"><a>关联</a></li>
                    </ul>
                    <ul class="tabs">
                        <!--<li id="ka-open"><a><img src="../katalon/images/branding/ka_32x24px.png" alt="Katalon TestOps"/>仪表盘</a></li>-->
                        <li id="save-log"><a title="保存日志为...">保存</a></li>
                        <li id="clear-log"><a title="清空日志">清空</a></li>
                        <li id="download-all"><a title="下载所有">下载所有</a></li>
                        <li id="data-files-add-csv"><a title="添加 CSV 文件">添加 CSV</a></li>
                        <li id="data-files-add-json"><a title="添加 JSON 文件">添加 JSON</a></li>
                        <li id="extension-add"><a title="添加 JS 文件">添加扩展脚本</a></li>
                        <li id="collapse-console"><a href="javascript:void(0);" title="开关面板" id="show-hide-bottom-panel">
                                <img src="/katalon/images/SVG/ic_keyboard_arrow_down_black_18px.svg" data-show="/katalon/images/SVG/ic_keyboard_arrow_up_black_18px.svg" data-hide="/katalon/images/SVG/ic_keyboard_arrow_down_black_18px.svg" alt="Show/Hide">
                            </a></li>
                    </ul>
                </header>
                <div id="tab4" class="tab_content case_roll">
                    <div class="module_content">
                        <div id="logcontainer">
                        </div>
                        <div id="screenshotcontainer">
                            <ul></ul>
                        </div>
                        <div id="variablecontainer">
                            <table id="variable-grid">
                                <colgroup>
                                    <col width="33.3333%">
                                    <col width="33.3333%">
                                    <col width="33.3333%">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>变量</th>
                                        <th>格式</th>
                                        <th>值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <div id="variable-grid-border"></div>
                        </div>
                        <div id="datacontainer" class="file-container">
                            <input id="load-csv-hidden" type="file" accept=".csv" multiple style="display: none"></input>
                            <input id="load-json-hidden" type="file" accept=".json" multiple style="display: none"></input>
                            <!--div class="submit_link">
                                <button id="data-files-add-csv" class="sub_btn"><img src="/katalon/images/SVG/add-icon.svg"> Add CSV File</button>
                                <button id="data-files-add-json" class="sub_btn"><img src="/katalon/images/SVG/add-icon.svg"> Add JSON File</button>
                            </div-->
                            <table>
                                <colgroup>
                                    <col width="33.3333%">
                                    <col width="33.3333%">
                                    <col width="33.3333%">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>类型</th>
                                        <th>名称</th>
                                        <th>行为</th>
                                    </tr>
                                </thead>
                                <tbody id="data-files-list">
                                </tbody>
                            </table>
                        </div>
                        <div id="extensionscontainer" class="file-container">
                            <input id="load-extension-hidden" type="file" accept=".js" multiple style="display: none"></input>
                            <!--div class="submit_link">
                                <button id="extension-add" class="sub_btn"><img src="/katalon/images/SVG/add-icon.svg"> Add Extension Script</button>
                            </div-->
                            <table>
                                <colgroup>
                                    <col width="33.3333%">
                                    <col width="33.3333%">
                                    <col width="33.3333%">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>类型</th>
                                        <th>名称</th>
                                        <th>行为</th>
                                    </tr>
                                </thead>
                                <tbody id="extensions-list">
                                </tbody>
                            </table>
                        </div>
                        <div id="refercontainer">
                        </div>
                    </div>
                </div>
                <!-- end of #tab4 -->
            </article>
            <!-- end of styles article -->
        </div>
        <div id="backup-section">
            <input id="backup-restore-hidden" type="file" accept=".json" style="display: none" />
            <p>
                <span id="backup-status"></span>
                <a href="#" id="backup-refresh-btn" class="katalon-link" style="display: none">刷新</a>
                <a href="#" id="backup-restore-btn" class="katalon-link" style="display: none">Restore</a>
            </p>
        </div>
        <!--<div class="spacer"></div>-->
        <div id="generateToScriptsDialog" title="导出测试用例为脚本" style="display: none">
            <div class="" style="height: 30px; line-height: 30px; margin-bottom: 12px;"><label for="select-script-language-id">Format </label>
                <select style="margin:0 5px;" id="select-script-language-id" class="select-script-language">
                    <option value="cs-wd-mstest">C# (WebDriver + MSTest)</option>
                    <option value="cs-wd-nunit">C# (WebDriver + NUnit)</option>
                    <option value="java-wd-testng">Java (WebDriver + TestNG)</option>
                    <option value="java-wd-junit">Java (WebDriver + JUnit)</option>
                    <option value="java-rc-junit">Java (WebDriver-backed Remote Control + JUnit)</option>
                    <option value="new-formatter-sample">Java (TestNG + Selenide) ISteps</option>
                    <option value="new-formatter-basecase">Java (TestNG + Selenide) BaseCase</option>
                    <option value="new-formatter-dynatrace">JSON (Dynatrace Synthetics)</option>
                    <option value="katalon" selected>Katalon Studio</option>
                    <option value="new-formatter-nrsynthetics">Node (New Relic Synthetics)</option>
                    <option value="new-formatter-protractorts">Protractor (Typescript)</option>
                    <option value="python2-wd-unittest">Python 2 (WebDriver + unittest)</option>
                    <option value="python-appdynamics">Python (AppDynamics)</option>
                    <option value="robot">Robot Framework</option>
                    <option value="ruby-wd-rspec">Ruby (WebDriver + RSpec)</option>
                    <option value="new-formatter-webdriver">WebDriver.io</option>
                    <option value="xml">XML</option>
                    <!-- must start with new-formatter- -->
                    <option value="new-formatter-puppeteer">Puppeteer</option>
                    <option value="new-formatter-puppeteer_w_comment">Puppeteer w Comments</option>
                    <option value="new-formatter-puppeteer_json">JSON (puppeteer)</option>
                </select>
                <div style="display: inline-block;">You can add your own formatter. Read more <a target="_blank" href="https://github.com/katalon-studio/katalon-recorder" class="katalon-link">here</a>.</div>
            </div>
            <textarea id="txt-script-id" class="txt-script">scripts</textarea>
        </div>
        <div id="ka-select-project-dialog" title="Select Katalon TestOps Project" style="display: none">
            <label for="select-ka-project">Select a project to upload your logs. You can create new projects at <a target="_blank" href="https://analytics.katalon.com" class="katalon-link">Katalon TestOps</a>.</label>
            <select id="select-ka-project"></select>
        </div>
        <div id="helpDialog" style="display: none">
            <button id="helpDialog-close"></button>
            <h1>Need help? Explore Katalon Recorder Support Resources</h1>
            <div id="panel-container">
                <a class="panel" href="https://docs.katalon.com/x/cRtO?utm_source=chrome%20recorder%20pop-up" target="_blank">
                    <img src="/katalon/images/SVG/user-manual-icon.svg">
                    <p class="panel-title">用户手册</p>
                    <p class="panel-description">Guides to utilize Katalon Recorder for automation effectively.</p>
                </a>
                <a class="panel" href="https://www.katalon.com/videos/katalon-recorder-videos/?utm_source=chrome%20recorder%20pop-up" target="_blank">
                    <img src="/katalon/images/SVG/videos-icon.svg">
                    <p class="panel-title">视频</p>
                    <p class="panel-description">Tutorial videos from our expert users with detailed instruction.</p>
                </a>
                <a class="panel" href="https://forum.katalon.com/?utm_source=chrome%20recorder%20pop-up" target="_blank">
                    <img src="/katalon/images/SVG/community-icon.svg">
                    <p class="panel-title">社区</p>
                    <p class="panel-description">Access Katalon fellow users tips and tricks sharing.</p>
                </a>
                <a id="katalon-introduction" class="panel" href="https://www.katalon.com?utm_source=chrome%20recorder%20pop-up" target="_blank">
                    <img src="/katalon/images/SVG/advanced-icon.svg">
                    <p class="panel-title">Free Advanced Automation</p>
                    <p class="panel-description">Try Katalon Studio - the best solution for Web, API &amp; Mobile automation.</p>
                </a>
            </div>
        </div>
    </section>
    <!-- script -->
    <script src="../common/browser-polyfill.js"></script>
    <script src="js/IO/inputFileTransformer.js"></script>
    <script src="js/IO/load_file.js"></script>
    <script src="js/IO/save_file.js"></script>
    <script src="js/UI/context_menu.js"></script>
    <script src="js/UI/command_grid.js"></script>
    <script src="js/UI/command_grid_toolbar.js"></script>
    <script src="js/UI/testcase_grid.js"></script>
    <script src="js/UI/log.js"></script>
    <script src="js/background/window-controller.js"></script>
    <script src="js/background/recorder.js"></script>
    <script src="js/background/initial.js"></script>
    <script src="../common/escape.js"></script>
    <script src="js/background/editor.js"></script>
    <script src="js/background/formatCommand.js"></script>
    <script src="js/background/website-login.js"></script>
    <script src="js/background/playback.js"></script>
    <!-- <script src="js/katalon/kar.js"></script> -->
    <script src="js/katalon/kar-testSuite.js"></script>
    <script src="js/katalon/kar-upload.js"></script>
    <script src="js/katalon/kar-loadCommand.js"></script>
    <script src="js/katalon/kar-generateScript.js"></script>
    <script src="js/katalon/kar-showDialog.js"></script>
    <script src="js/katalon/kar-dataFile.js"></script>
    <script src="js/katalon/kar-extensionScript.js"></script>
    <script src="js/katalon/kar-restoreData.js"></script>
    <script src="js/katalon/kar-screenshot.js"></script>
    <script src="js/katalon/kar.js"></script>
    <script type="text/javascript" src="js/katalon/newformatters/basecase.js"></script>
    <script type="text/javascript" src="js/katalon/newformatters/sample.js"></script>
    <script type="text/javascript" src="js/katalon/newformatters/nrsynthetics.js"></script>
    <script type="text/javascript" src="js/katalon/newformatters/protractorts.js"></script>
    <script type="text/javascript" src="js/katalon/newformatters/dynatrace.js"></script>
    <script type="text/javascript" src="js/katalon/newformatters/webdriver.js"></script>
    <!-- new formatter -->
    <script type="text/javascript" src="js/katalon/newformatters/puppeteer.js"></script>
</body>

</html>